<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter="8px">
      <h1>{{ certificateLabel }}</h1>
      <aui-multi-cluster-switch
        (onChange)="onChange()"
      ></aui-multi-cluster-switch>
    </lv-group>
  </div>
  <div class="aui-block aui-paginator-container">
    <div class="aui-operation">
      <lv-group lvGutter="10px">
        <button
          *ngIf="!isHyperdetect"
          lvType="primary"
          lv-button
          (click)="addExternalComponent()"
          pmpermission
          pmOperation="AddingExternalComponentCertificates"
        >
          {{ addExternalComponentLable }}
        </button>
      </lv-group>
      <lv-group>
        <button
          class="aui-button-icon"
          lv-button
          lvSize="auto"
          (click)="refresh()"
        >
          <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
        </button>
      </lv-group>
    </div>
    <div class="list-container double-row-height">
      <lv-datatable
        [lvData]="certificateData"
        #cerfifiCateTable
        [lvPaginator]="page"
        lvResizeMode="expand"
        [lvScroll]="{ x: '100%' }"
        lvResize
      >
        <thead>
          <tr>
            <th>{{ componentLabel }}</th>
            <th>{{ componentTypeLabel }}</th>
            <th>{{ certificateStatusLabel }}</th>
            <th width="400px">{{ expirationTimeLabel }}</th>
            <th width="144px">{{ operationLabel }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of cerfifiCateTable.renderData">
            <ng-container
              *ngTemplateOutlet="tableViewTpl; context: { $implicit: item }"
            >
            </ng-container>
          </ng-container>
        </tbody>
      </lv-datatable>
    </div>
    <div class="aui-paginator-wrap">
      <lv-paginator
        [lvPageSize]="pageSize"
        [lvTotal]="total"
        [lvPageIndex]="pageIndex"
        [lvPageSizeOptions]="sizeOptions"
        #page
        [hidden]="!total"
      ></lv-paginator>
    </div>
  </div>
</div>
<ng-template #tableViewTpl let-item>
  <tr>
    <td>
      <span class="aui-link" id="outerClosable" (click)="getDetail(item)">{{
        item.name
      }}</span>
    </td>
    <td>
      <span lv-overflow>{{ item.typeNames }}</span>
    </td>
    <td>
      <aui-status
        [value]="item.validity"
        type="Certificate_Status"
      ></aui-status>
    </td>
    <td>
      <div class="aui-block-container">
        <div
          class="content-right"
          lv-tooltip="{{
            expiredDateLabel + (item.expiredDate | date: 'yyyy/MM/dd HH:mm:ss')
          }}"
        >
          <p
            *ngIf="item.remainingDays > item.expirationWarningDays"
            class="info-level"
          >
            {{ item.expirationWarningDays + daysLabel }}
          </p>
          <p
            *ngIf="
              item.remainingDays <= item.expirationWarningDays &&
              item.remainingDays >= item.expirationWarningDays / 2
            "
            class="common-level"
          >
            {{ item.remainingDays + daysLabel }}
          </p>
          <p
            *ngIf="
              item.remainingDays < item.expirationWarningDays / 2 &&
              item.remainingDays >= item.expirationWarningDays / 4
            "
            class="warn-level"
          >
            {{ item.remainingDays + daysLabel }}
          </p>
          <p
            *ngIf="item.remainingDays < item.expirationWarningDays / 4"
            class="major-level"
          >
            {{ item.remainingDays + daysLabel }}
          </p>
          <p *ngIf="!item.validity" class="label-container">
            {{ expiredLabel }}
          </p>
          <p *ngIf="item.validity" class="label-container">
            {{
              item.remainingDays > item.expirationWarningDays
                ? moreThanLabel
                : leftLabel
            }}
          </p>
        </div>
        <div class="content-left">
          <p>{{ item.expirationWarningDays + daysLabel }}</p>
          <p class="label-container">{{ daysOfWarningLabel }}</p>
        </div>
        <i *ngIf="_includes(
          [
            COMPONENT_TYPE.communicationComponent.value,
            COMPONENT_TYPE.redisComponent.value
          ],
          item.type
        ) && item.remainingDays < item.expirationWarningDays"
        lv-icon="aui-icon-help" class="innerTip" lv-tooltip="{{
          'ststem_regenerate_certificate_tips_label' | i18n
        }}"></i>
      </div>
    </td>
    <td
      *ngIf="
        _includes(
          [
            COMPONENT_TYPE.internal.value,
            COMPONENT_TYPE.protectAgent.value,
            COMPONENT_TYPE.communicationComponent.value,
            COMPONENT_TYPE.redisComponent.value,
            COMPONENT_TYPE.ha.value
          ],
          item.type
        )
      "
    >
      <lv-operation-menu
        [lvItemsFn]="internalOptsCallback"
        [lvData]="item"
      >
      </lv-operation-menu>
    </td>
    <td
      *ngIf="
        !_includes(
          [
            COMPONENT_TYPE.internal.value,
            COMPONENT_TYPE.protectAgent.value,
            COMPONENT_TYPE.communicationComponent.value,
            COMPONENT_TYPE.redisComponent.value,
            COMPONENT_TYPE.ha.value
          ],
          item.type
        )
      "
    >
      <lv-operation-menu
        [lvItemsFn]="externalOptsCallback"
        [lvData]="item"
      >
      </lv-operation-menu>
    </td>
  </tr>
</ng-template>

<ng-template #headerTpl>
  <div class="lv-modal-title aui-operation">
    <span>{{ componentName }}</span>
    <div>
      <button
        lv-button
        lv-dropdown
        lvSize="auto"
        *ngIf="!!getShowOpts(currentItem)?.length"
        [lvDropdownMenus]="optOptions"
      >
        {{ operationLabel }}
        <i #lvDropdownTrigger lv-icon="lv-icon-triangle-down"></i>
      </button>
    </div>
  </div>
</ng-template>
